import F2 from '@antv/wx-f2';
const { Shape, Util, Global, G, Animate } = F2;
const { Vector2 } = G;
function initChart(canvas, width, height) {
  // customize shape and animation
  Shape.registerShape('interval', 'tick', {
    draw(cfg, container) {
      const points = this.parsePoints(cfg.points);
      const style = Util.mix({
        stroke: cfg.color
      }, Global.shape.interval, cfg.style);
      if (cfg.isInCircle) {
        let newPoints = points.slice(0);
        if (this._coord.transposed) {
          newPoints = [points[0], points[3], points[2], points[1]];
        }

        const { x, y } = cfg.center;
        const v = [1, 0];
        const v0 = [newPoints[0].x - x, newPoints[0].y - y];
        const v1 = [newPoints[1].x - x, newPoints[1].y - y];
        const v2 = [newPoints[2].x - x, newPoints[2].y - y];

        let startAngle = Vector2.angleTo(v, v1);
        let endAngle = Vector2.angleTo(v, v2);
        const r0 = Vector2.length(v0);
        const r = Vector2.length(v1);

        if (startAngle >= 1.5 * Math.PI) {
          startAngle = startAngle - 2 * Math.PI;
        }

        if (endAngle >= 1.5 * Math.PI) {
          endAngle = endAngle - 2 * Math.PI;
        }

        const coord = this._coord;

        const lineWidth = r - r0;
        const newRadius = r - (lineWidth / 2);

        return container.addShape('Arc', {
          className: 'interval',
          attrs: Util.mix({
            x,
            y,
            startAngle,
            endAngle,
            r: newRadius,
            lineWidth,
            lineCap: 'round',
            shadowColor: "rgba(0, 0, 0, 0.6)",
            shadowOffsetX: 0,
            shadowOffsetY: -5,
            shadowBlur: 50
          }, style)
        });
      }
    }
  });

  Animate.registerAnimation('waveIn', function (shape, animateCfg, coord) {
    const startAngle = shape.attr('startAngle');
    const endAngle = shape.attr('endAngle');
    shape.attr('endAngle', startAngle);
    shape.animate().to(Util.mix({
      attrs: {
        endAngle: endAngle
      }
    }, animateCfg));
  });
  // ------

  const data = [
    { name: 'activity1', percent: 2370, color: '#1ad5de', icon: 'stand.png', bgColor: '#183C3D' },
    { name: 'activity2', percent: 80, color: '#a0ff03', icon: 'walk.png', bgColor: '#324214' },
    { name: 'activity3', percent: 65, color: '#e90b3a', icon: 'run.png', bgColor: '#40131D' }
  ];

  const chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

  chart.source(data, {
    percent: {
      max: 100
    }
  });
  chart.legend(false);
  chart.coord('polar', {
    transposed: true,
    innerRadius: 0.382
  });
  chart.axis(false);
  chart.interval()
    .position('name*percent')
    .color('color', val => {
      return val;
    })
    .shape('tick')
    .size(26)
    .animate({
      appear: {
        animation: 'waveIn',
        duration: 1500,
        easing: 'elasticOut'
      },
      update: {
        duration: 1500,
        easing: 'elasticOut'
      }
    });

  data.map((obj, index) => {
    // background
    chart.guide().arc({
      start: [obj.name, 0],
      end: [obj.name, 99.98],
      top: false,
      style: {
        lineWidth: 26,
        stroke: obj.bgColor
      }
    });
  });
  chart.render();
/*
  const updateData = function () {
    for (let i = 0; i < data.length; ++i) {
      data[i].percent = Math.floor((Math.random() * 60) + 20);
    }
    chart.changeData(data);
    setTimeout(updateData, 1500);
  };

  setTimeout(updateData, 1500); */
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'F2 微信小程序图表组件，你值得拥有~',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    opts: {
      onInit: initChart
    }
  },

  onReady() {
  }
});
